<template>
  <div class="content">
    <div class="title">
      <h1>党员综合能力调查问卷</h1>
      <span class="code" @click="dialogVisible = true"><a href="javascript:"></a>
        <img
          src="https://qr.wjx.cn/handler/qrcode.ashx?chl=https%3a%2f%2fwww.wjx.cn%2fvm%2fQpP3dvr.aspx%3fpwx%3d1&chs=200x200&sign=60ff69a6a58092804ec7398e2fa53f5c44c25da3"
          alt="Your Image" class="small-image">
      </span>
    </div>
    <p>
      尊敬的老师：感谢参与测评！本测评主要用于教职工职业生涯发展规划。测评采用匿名方式，数据信息将被严格保密，请根据您的实际情况进行填写。
    </p>
    <hr>
    <el-dialog :visible.sync="dialogVisible" width="250px" :before-close="handleClose">
      <div class="code-img">
        <a href="javascript:"><img
            src="https://qr.wjx.cn/handler/qrcode.ashx?chl=https%3a%2f%2fwww.wjx.cn%2fvm%2fQpP3dvr.aspx%3fpwx%3d1&chs=200x200&sign=60ff69a6a58092804ec7398e2fa53f5c44c25da3"
            alt=""></a>
      </div>
      <div class="tips">手机扫描二维码答题</div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    handleClose (done) {
      this.dialogVisible = !this.dialogVisible
    }
  }
}
</script>

<style scoped lang="less">
.content {
  background: #ffffff;
  padding: 55px 81px 35px;

  .title {
    width: 749px;
    height: 40px;
    margin: 0 auto 35px;
    position: relative;
    background: #ffffff;
    color: #0095ff;
    text-align: center;
    font-size: 14px !important;

    .code {
      position: absolute;
      width: 50px;
      height: 50px;
      display: inline-block;
      right: 0;
      top: -5px;

      .small-image {
        width: 100%;
        /* 图片的宽度占满容器 */
        height: auto;
        /* 高度自适应，保持图片比例 */
      }
    }
  }

  hr {
    position: relative;
    top: 15px;
    height: 1px;
    border: none;
    border-top: 1px dashed black;
  }

  .attention {
    width: 100%;
    height: 180px;
    // background: chartreuse;
    border-bottom: 1px dashed #c9c9c9;
    line-height: 26px;
  }

  .code-img {
    width: 200px;
    height: 200px;
    margin: 0 auto;

    img {
      width: 200px;
      height: 200px;
    }
  }

  .tips {
    text-align: center;
  }
}</style>
